<template>
	<div class="content">
		<div class="topContent">
			<div class="topBox">
				<div class="topLeft">今日实时数据（全部数据）</div>
				<div class="topRight">
					<!--          没有接口隐藏掉-->
					<t-button theme="primary">
						<span>外呼口报</span>
						<span style="margin-left: 8px">
							<svg-icon :name="'icon-arrowTD'" class-name="arrowTD-svg-icon"></svg-icon>
						</span>
					</t-button>
				</div>
			</div>
			<div class="line"></div>
			<div class="formBox">
				<t-form v-show="!isFold" ref="form" :data="formData" :layout="'inline'" scroll-to-first-error="smooth" :class="isFold ? '' : 'paddingBottom'">
					<t-form-item label="任务名" name="platform" :label-width="68" requiredMark>
						<t-select placeholder="请选择任务" v-model="formData.platform" @change="onPlatformChange" :options="platformOptions" filterable></t-select>
					</t-form-item>
					<t-form-item label="时间范围" :label-width="68" requiredMark>
						<t-date-range-picker v-model="nowtime" :presets="presets" :disableDate="disDate" />
					</t-form-item>
					<!-- <dk-button>测试</dk-button> -->
					<t-form-item class="formHandleBox" v-if="!isFold">
						<t-space size="small" style="gap: 10px">
							<t-button @click="handleQuery" class="queryBtn hoverBlue">查询</t-button>
							<t-button class="resetBtn hoverLightBlue" @click="handleReset">刷新</t-button>

							<!-- <t-button disabled>填充按钮</t-button> -->
							<!-- <span class="arrowCont">
                <svg-icon
                  @click="handleArrow"
                  :name="'icon-arrowTD'"
                  class-name="arrowTD-svg-icon"
                  :style="isFold === true ? '' : 'transform: rotate(180deg)'"
                ></svg-icon>
              </span> -->
						</t-space>
					</t-form-item>
				</t-form>
				<!-- 展开 -->
				<!-- <div class="upArrow" v-show="isFold">
					<svg-icon @click="handleArrow" :name="'icon-arrowTD'" class-name="arrowTD-svg-icon" :style="isFold === true ? '' : 'transform: rotate(180deg)'"></svg-icon>
				</div> -->
			</div>

			<div class="centerContent">
				<div class="topcenter">
					<div class="onecard">
						<div class="text">
							<div>
								接听率
								<t-tooltip placement="right" content="接听率">
									<t-icon name="help-circle" />
								</t-tooltip>
							</div>
							<div>{{ infolist.success_rate }}%</div>
							<div>接听数量：{{ infolist.success_sum }}位</div>
						</div>
						<div ref="refanswerrate" class="picture"></div>
					</div>
					<div class="onecard">
						<div class="text">
							<div>
								平均通话时长
								<t-tooltip placement="right" content="平均通话时长">
									<t-icon name="help-circle" />
								</t-tooltip>
							</div>
							<div>{{ infolist.call_duration_avg }}秒</div>
							<div>累计通话时长：{{ infolist.call_duration_sum }}</div>
						</div>
						<div ref="refcallduration" class="picture"></div>
					</div>
					<div class="onecard">
						<div class="text">
							<div>
								A/B意向数
								<t-tooltip placement="right" content="A/B意向数">
									<t-icon name="help-circle" />
								</t-tooltip>
							</div>
							<div>{{ infolist.intent_A_B }}位</div>
							<div>累计外呼数：{{ infolist.call_sum }}位</div>
						</div>
						<div ref="refproportioncus" class="picture"></div>
					</div>
					<div class="onecard">
						<div class="nownum">
							<div class="tasks">
								<div>
									当前任务数
									<t-tooltip placement="right" content="当前任务数">
										<t-icon name="help-circle" />
									</t-tooltip>
								</div>
								<div>{{ infolist.call_sum }}位</div>
							</div>
							<div class="tasks">
								<div>
									当前并发数
									<t-tooltip placement="right" content="当前并发数">
										<t-icon name="help-circle" />
									</t-tooltip>
								</div>
								<div>{{ infolist.concurrent_sum }}位</div>
							</div>
						</div>
					</div>
				</div>
				<div class="line"></div>
				<div class="cencenter">
					<div class="outcall">
						<div class="outcalltop">
							<div></div>
							<div>
								<t-form>
									<t-form-item label="时间范围" :label-width="68" requiredMark>
										<t-date-range-picker v-model="callouttime" :presets="presets" @change="searchcallouttime" :disableDate="disDate" />
									</t-form-item>
								</t-form>
							</div>
						</div>
						<div ref="reflineoutcall" class="clalineoutcall"></div>
					</div>
					<div class="outcall">
						<div class="outcalltop">
							<div></div>
							<div>
								<t-form>
									<t-form-item label="时间范围" :label-width="68" requiredMark>
										<t-date-range-picker v-model="calldurationtime" :presets="presets" @change="searchcalldurationtime" :disableDate="disDate" />
									</t-form-item>
								</t-form>
							</div>
						</div>
						<div ref="refbigcallduration" class="clalineoutcall"></div>
					</div>
					<div class="outcall">
						<div class="outcalltop">
							<div></div>
							<div>
								<t-form>
									<t-form-item label="时间范围" :label-width="68" requiredMark>
										<t-date-range-picker v-model="intlabeltime" :presets="presets" @change="searchintlabeltime" :disableDate="disDate" />
									</t-form-item>
								</t-form>
							</div>
						</div>
						<div class="clalineoutcall">
							<div ref="refduiintention" class="duiintention"></div>
							<div ref="refyuanintention" class="yuanintention"></div>
						</div>
					</div>
					<!-- <div>实时任务数据图表（当前版本不做）</div> -->
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';
import {
	answerrate,
	proportioncustomers,
	// outcall,
	callduration,
	lineoutcall,
	bigcallduration,
	duiintention,
	yuanintention
} from './echarts/aiindex';
import { getinfoList, getcallsum, getcallduration, getcalllabel } from '@/api/home/Aiindex';
const refanswerrate = ref(null);
const refproportioncus = ref(null);
// const refoutcall = ref(null);
const refcallduration = ref(null);
const reflineoutcall = ref(null);
const refbigcallduration = ref(null);
const refduiintention = ref(null);
const refyuanintention = ref(null);
// 获取当前日期
const now = new Date();
// 计算本周一的时间
const startOfWeek = new Date(now);
const dayOfWeek = now.getDay(); // 获取当前是星期几，0 表示星期天
const diff = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // 如果是星期天，回退到前一个星期一
startOfWeek.setDate(now.getDate() - diff);
startOfWeek.setHours(0, 0, 0, 0); // 设置为本周一的00:00:00
// 时间快捷键
const presets = reactive({
	今天: [new Date(), new Date()],
	昨天: [new Date(+new Date() - 86400000), new Date(+new Date() - 86400000)],
	本周: [startOfWeek, new Date()],
	本月: [new Date(new Date().getFullYear(), now.getMonth(), 1, 0, 0, 0, 0), new Date()],
	近7天: [new Date(+new Date() - 86400000 * 6), new Date()],
	近30天: [new Date(+new Date() - 86400000 * 29), new Date()]
});

const disDate = ref({
	before: new Date(+new Date() - 86400000 * 47),
	after: new Date(+new Date() + 86400000 * 46)
});

// form 表单
const formData = reactive({
	company: '',
	org: '',
	branch: '',
	templateId: '',
	agentIds: []
});

const nowtime = ref([]);
const callouttime = ref([]);
const calldurationtime = ref([]); //通话时长时间
const intlabeltime = ref([]); //意向标签时间
const infolist = ref({});

const infoList = async (params) => {
	const { data: res } = await getinfoList(params);
	infolist.value = res;
	const Chartanswerrate = echarts.init(refanswerrate.value);
	const Chartproportioncus = echarts.init(refproportioncus.value);

	answerrate(Chartanswerrate, infolist.value.success_rate);
	proportioncustomers(Chartproportioncus, res);
};

//   查询
const handleQuery = () => {
	let params = {
		start_time: nowtime.value[0],
		end_time: nowtime.value[1],
		project_id: '',
		task_id: 3
	};
	infoList(params);
};
// 刷新
const handleReset = () => {
	console.log('刷新');
};

//
const searchcallouttime = async () => {
	const { data: res } = await getcallsum({ project_id: 3 });
	const dateobj = {
		datearr: [],
		call_sumarr: [],
		success_ratearr: [],
		success_sumarr: []
	};
	res.forEach((i) => {
		dateobj.datearr = [...dateobj.datearr, i.date];
		dateobj.call_sumarr = [...dateobj.call_sumarr, i.call_sum];
		dateobj.success_ratearr = [...dateobj.success_ratearr, i.success_rate];
		dateobj.success_sumarr = [...dateobj.success_sumarr, i.success_sum];
	});
	const Chartlineoutcall = echarts.init(reflineoutcall.value);
	lineoutcall(Chartlineoutcall, dateobj);
};

const searchcalldurationtime = async () => {
	const { data: res } = await getcallduration({ project_id: 3 });
	const dateobj = {
		datearr: [],
		call_duration_avgarr: [],
		call_duration_sumarr: []
	};
	res.forEach((i) => {
		dateobj.datearr = [...dateobj.datearr, i.date];
		dateobj.call_duration_avgarr = [...dateobj.call_duration_avgarr, i.call_duration_avg];
		dateobj.call_duration_sumarr = [...dateobj.call_duration_sumarr, i.call_duration_sum];
	});
	const Chartbigcallduration = echarts.init(refbigcallduration.value);
	bigcallduration(Chartbigcallduration, dateobj);
};

const searchintlabeltime = async () => {
	const { data: res } = await getcalllabel({ project_id: 3 });
	// console.log(res, "=====>res");
	const dateobj = {
		datearr: [],
		Aarr: [],
		Barr: [],
		Carr: []
	};
	res.list.forEach((i) => {
		dateobj.datearr = [...dateobj.datearr, i.date];
		dateobj.Aarr = [...dateobj.Aarr, i.A];
		dateobj.Barr = [...dateobj.Barr, i.B];
		dateobj.Carr = [...dateobj.Carr, i.C];
	});
	const alldate = {
		A: res.A,
		B: res.B,
		C: res.C
	};
	// console.log(dateobj);

	const Chartduiintention = echarts.init(refduiintention.value);
	const Chartyuanintention = echarts.init(refyuanintention.value);

	duiintention(Chartduiintention, {}, dateobj);
	yuanintention(Chartyuanintention, {}, alldate);
	// 意向标签圆环图联动堆积图
	Chartyuanintention.on('legendselectchanged', function (params) {
		const selected = params.selected;
		duiintention(Chartduiintention, selected, dateobj);
	});
	// 意向标签堆积图联动圆环图
	Chartduiintention.on('legendselectchanged', function (params) {
		const selected = params.selected;
		yuanintention(Chartyuanintention, selected, alldate);
	});
};

onMounted(() => {
	infoList({ task_id: 3 });
	searchcallouttime();
	searchcalldurationtime();
	searchintlabeltime();
	// var Chartoutcall = echarts.init(refoutcall.value);
	var Chartcallduration = echarts.init(refcallduration.value);

	// outcall(Chartoutcall);
	callduration(Chartcallduration);
});
</script>

<style lang="scss" scoped>
.content {
	position: relative;
	overflow: hidden;
	background-color: #ebeced !important;
	padding: 8px;
	overflow-y: auto;
	.topContent {
		background-color: white;
		border-radius: 4px;
		.topBox {
			height: 65px;
			display: flex;
			padding: 20px 20px 17px 20px;
			.topLeft {
				font-size: 16px;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
			}
			.topRight {
				margin-left: auto;
				:deep(.t-button) {
					width: 88px;
					height: 28px;
					opacity: 1;
					border-radius: 3px;
					background: rgba(227, 238, 255, 1);
					border: 0.5px solid rgba(9.38399999999999, 95.71679999999998, 234.6, 1);
					padding: 0;
					font-size: 12px;
					font-weight: 400;
					color: rgba(30, 117, 254, 1);
				}
				.arrowTD-svg-icon {
					height: 16px;
					width: 16px;
					cursor: pointer;
					display: inline-block;
					vertical-align: middle;
				}
			}
		}
		.line {
			height: 0;
			opacity: 1;
			background: rgba(204, 204, 204, 1);
			border: 1px solid rgba(239, 242, 245, 1);
			margin: 0 20px;
		}
		.formBox {
			padding: 0 20px;
			:deep(.t-form) {
				padding: 20px 0 20px 0;
				.t-form-inline {
					row-gap: 16px !important;
				}
				.t-form__item {
					width: 25%;
					height: 28px;
					margin-right: 0 !important;
					padding-right: 10px;
					.t-range-input {
						height: 28px;
					}
					.t-form__label--right {
						text-align: left;
						padding-right: 0;
						font-size: 12px;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.9);
					}
					.t-select__wrap {
						.t-input {
							height: 28px;
						}
					}
				}
				.t-form__item:nth-child(7) {
					padding-right: 0;
				}
				.seats_q {
					.t-select__wrap {
						height: 28px;
						.t-select-input {
							height: 28px;
							.t-tag-input .t-input {
								min-height: 28px;
								.t-tag {
									height: 20px;
								}
							}
						}
					}
				}
				.formHandleBox {
					margin-left: auto;
					text-align: right;
					padding-right: 0;
					.t-space {
						margin-left: auto;
						justify-content: center;
						align-items: center;
						.queryBtn {
							border: none;
							width: 56px;
							height: 30px;
							opacity: 1;
							border-radius: 3px;
							background: rgba(30, 117, 254, 1);
							font-size: 12px;
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
							text-align: center;
						}
						.resetBtn {
							width: 56px;
							height: 30px;
							opacity: 1;
							border-radius: 3px;
							background: rgba(236, 242, 254, 1);
							border: 0.5px solid rgba(30, 117, 254, 1);
							font-size: 12px;
							font-weight: 400;
							color: rgba(30, 117, 254, 1);
							text-align: center;
						}
						.arrowCont {
							display: flex;
							justify-content: center;
							align-items: center;
							span {
								font-size: 12px;
								font-weight: 500;
								color: rgba(138, 138, 138, 1);
							}
							.arrowTD-svg-icon {
								height: 16px;
								width: 16px;
								cursor: pointer;
							}
						}
					}
					.t-form__controls {
						margin-left: 0 !important;
					}
				}
			}
			.upArrow {
				text-align: right;
				height: 20px;
				.arrowTD-svg-icon {
					height: 16px;
					width: 16px;
					cursor: pointer;
				}
			}
		}
	}
	.centerContent {
		.topcenter {
			display: grid;
			grid-template-columns: 25% 25% 25% 25%;
			//   column-gap: 20px;
			padding: 0px 20px 20px 20px;
			.onecard {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10px;
				padding: 0 15px;
				height: 150px;
				box-shadow: 0px 0px 5px 2px rgb(231, 231, 231);
				// background-color: #ffffff;
				.text {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					:nth-child(1) {
						color: rgb(115, 117, 117);
						font-size: 14px;
					}
					:nth-child(2) {
						color: rgb(0, 0, 0);
						font-size: 24px;
					}
					:nth-child(3) {
						color: rgb(115, 117, 117);
						font-size: 14px;
					}
				}
				.nownum {
					width: 100%;
					height: 100%;
					padding: 10px 0;
					display: flex;
					justify-content: space-around;
					.tasks {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						:nth-child(1) {
							color: rgb(115, 117, 117);
							font-size: 14px;
						}
						:nth-child(2) {
							color: rgb(0, 0, 0);
							font-size: 24px;
						}
					}
					// .concurrency {
					//   display: flex;
					//   flex-direction: column;
					//   justify-content: space-around;
					// }
				}
				.picture {
					width: 150px;
					height: 100%;
				}
			}
		}
		.cencenter {
			padding: 20px;
			.outcall {
				padding-bottom: 40px;
				width: 100%;
				// height: 500px;
				.outcalltop {
					display: flex;
					justify-content: space-between;
				}
				.clalineoutcall {
					height: 600px;
					// background-color: #eee;
					.duiintention {
						display: inline-block;
						width: 70%;
						height: 100%;
					}
					.yuanintention {
						display: inline-block;
						width: 30%;
						height: 100%;
					}
				}
			}
		}
	}
	.emptyBox {
		position: absolute;
		height: 116px;
		width: 69px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		.emptyTable-svg-icon {
			height: 62px;
			width: 69px;
		}
		span {
			font-size: 12px;
			font-weight: 400;
			color: rgba(92, 91, 91, 1);
		}
	}
	.chartBox {
		position: relative;
		width: 100%;
		height: 351px;
		margin-top: 8px;
		background-color: white;
		border-radius: 4px;
		padding: 20px 20px 0 20px;
	}
	.chartBox_m {
		position: relative;
		width: 100%;
		height: 240px;
		margin-top: 8px;
		background-color: white;
		border-radius: 4px;
		padding: 20px 20px 0 20px;
	}
	.chartBox_rect {
		position: relative;
		//width: 100%;
		height: 407px;
		margin-top: 8px;
		background-color: white;
		border-radius: 4px;
		padding: 20px 20px 0 20px;
		margin-bottom: 36px;
		overflow: hidden;
	}
	.title_chart {
		display: flex;
		justify-content: center;
		align-items: center;
		.left_t {
			font-size: 14px;
			font-weight: 700;
			color: rgba(32, 32, 32, 1);
		}
		.right_t {
			margin-left: auto;
			font-size: 12px;
			font-weight: 400;
			color: rgba(32, 32, 32, 1);
		}
	}
}
.shortForm {
	padding-right: 0 !important;
}
.langForm {
	padding-right: 10px !important;
}
</style>
